<template>
  <div class="class-detail">
    <class-main :stage-list="stageList"/>
    <stage-dialog :visible-dialog="stageDialog" @closeAddStage="stageDialog= false" @pushAddStage="pushAddStage"/>
    <class-dialog :visible-dialog="classDialog" @closeAddClass="classDialog= false"/>
    <div class="button-wrap">
      <el-button @click="backStep">上一步</el-button>
      <el-button type="primary" @click="nextStep">保存并继续</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import classMain from './classdetail/complextable'
import stageDialog from './classdetail/stageDialog'
import classDialog from './classdetail/classDialog'
import { pushMessageBus } from './eventbus'
import { getAssetsStage } from '@/api/subject/digitalAssets' // 接口
export default {
  components: {
    classMain,
    stageDialog,
    classDialog
  },
  props: {
    assets: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      stageDialog: false,
      classDialog: false,
      stageList: []
    }
  },
  created() {
    if (this.assets.id) {
      this.getAssetsStage()
    } else if (this.assets.stageList) {
      this.stageList = this.assets.stageList
    }
  },
  mounted() {
    pushMessageBus.$on('fromStep-openAddStage', () => {
      this.stageDialog = true
    })
    pushMessageBus.$on('fromStep-openAddClass', () => {
      this.classDialog = true
      console.log(111)
    })
  },
  methods: {
    getAssetsStage() {
      getAssetsStage(this.assets.id).then(res => {
        this.stageList = res.data.items
      })
    },
    pushAddStage(val) {
      this.stageList.push(Object.assign({}, val))
      this.stageDialog = false
    },
    backStep() {
      this.assets.stageList = Object.assign([], this.stageList)
      this.$emit('classBack', this.assets)
    },
    nextStep() {
      this.assets.stageList = Object.assign([], this.stageList)
      this.$emit('classNext', this.assets)
    },
    handleCancel() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss">
.class-detail {
  .button-wrap {
    margin-top: 40px;
  }
}
</style>
